<template>
  <page-container>
    <search-form
      v-model="searchForm"
      :searchColumns="searchColumns"
      :searchOptions="{ menuSpan: 8 }"
      @on-search="handleSearch">
      <template v-slot:newBtn>
        <el-button
          type="primary"
          @click="handelAddUrl('add')"
          >新增方案</el-button
        >
      </template>
    </search-form>

    <avue-table
      :dataList="dataList"
      :loading="loading"
      :page="page"
      :tableColumns="tableColumns"
      :tableOptions="{ menuWidth: 120 }"
      @onPageChange="onPageChange">
      <template v-slot:menu="{ row }">
        <el-button
          type="primary"
          @click="handelAddUrl('edit', row)"
          icon="el-icon-edit"
          circle></el-button>
        <el-button
          type="danger"
          @click="delRow(row.id)"
          icon="el-icon-delete-solid"
          circle></el-button>
      </template>
    </avue-table>
    <el-dialog
      title="推广链接"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="outerVisible">
      <avue-form
        ref="forms"
        :option="option"
        v-model="dialogForm"
        @submit="handleSubmit"
        @reset-change="close"></avue-form>
    </el-dialog>
  </page-container>
</template>

<script>
import tableMixins from '@/mixins/table'
import { deepClone } from '@/utils'
import { mapGetters } from 'vuex'
import {
  delCountryActivityEditList,
  getCountryActivityQueryList,
  getCountryActivityAddList,
  getCountryActivityEditList,
  getKeyWord,
} from '@/api/sales'
import { searchColumns, tableColumns } from './config/table-config'
import { allDialogForm } from './config/dialogForm'

export default {
  mixins: [tableMixins],
  data() {
    return {
      action: '',
      outerVisible: false,
      resData: [],
      dataList: [],
      childList: [],
      activeNameList: [],
      searchForm: {},
      dialogForm: {
        status: 1,
      },
    }
  },
  computed: {
    ...mapGetters(['commonData', 'countryList']),
    userList() {
      return this.commonData?.userList ?? []
    },
    allDialogForm,
    searchColumns,
    tableColumns,
    option() {
      return {
        emptyText: '取消',
        span: 24,
        labelWidth: 120,
        column: this.allDialogForm,
        callback: async ({ data, close }) => {
          this.resData = []
          if (this.type === 'edit') {
            data.activity_ids = data?.activitiy_name.join(',')
            delete data?.activitiy_name
            this.resData = await getCountryActivityEditList(data)
          } else {
            data.activity_ids = data?.activitiy_name.join(',')
            delete data.activitiy_name
            delete data.activity_names
            this.resData = await getCountryActivityAddList(data)
          }
          if (this.resData.code === 0) {
            this.$message.success(`${this.type === 'edit' ? '编辑' : '新增'}成功`)
          }
          this.getList()
          close()
        },
      }
    },
  },
  methods: {
    fetchMethod: getCountryActivityQueryList,
    delMethod: delCountryActivityEditList,

    // 查询参数格式化
    formatSearch() {
      const searchParams = deepClone(this.searchForm)
      return searchParams
    },

    handelAddUrl(type, row) {
      this.type = type
      this.outerVisible = true
      this.dialogForm = {}
      if (this.type === 'edit') {
        this.dialogForm = deepClone(row)
        this.dialogForm.activitiy_name = row?.activity_ids.map(item => Number(item))
      }
    },
    async handleSubmit(form, done) {
      const data = deepClone(this.dialogForm)

      let resData = {}
      if (this.type === 'add') {
        data.activity_ids = data?.activitiy_name.join(',')
        delete data?.activitiy_name
        resData = await getCountryActivityAddList(data)
      } else {
        data.activity_ids = data?.activitiy_name.join(',')
        delete data.activitiy_name
        delete data.activity_names
        resData = await getCountryActivityEditList(data)
      }
      if (resData?.code === 0) {
        this.$message.success('提交成功！')
        this.clean()
        this.outerVisible = false
        this.getList()
        done()
      }
    },
    close() {
      this.outerVisible = false
    },
    clean() {
      this.$refs.forms.resetForm()
    },
    async queryKeyWord(val) {
      const { data } = await getKeyWord({ status: 1, page: 1, page_size: 100, page_type: val })
      return data?.list.map(item => {
        return {
          value: item.id,
          label: item?.name,
        }
      })
    },
  },
  mounted() {
    this.handleSearch()
    this.queryKeyWord()
  },
}
</script>

<style lang="scss" scoped></style>
